<template>
  <div id="app">
    <template v-if="isManageSystem">
      <el-container style="height: 100%; overflow: hidden">
        <el-aside style="height: 100%; width: 200px">
          <AsideManageSystem></AsideManageSystem>
        </el-aside>
        <el-container class="inner-container">
          <el-header
            style="
              background: #fff;
              position: fixed;
              top: 0;
              left: 200px;
              right: 0;
            "
          >
            <HeaderManageSystem></HeaderManageSystem>
          </el-header>
          <el-main
            style="
              background-color: #f7f7f7;
              position: absolute;
              top: 60px;
              bottom: 0;
              left: 200px;
              right: 0;
            "
          >
            <transition name="router-transition" mode="out-in">
              <router-view class="view" />
            </transition>
          </el-main>
        </el-container>
      </el-container>
    </template>
    <template v-else>
      <el-container>
        <el-header
          style="
            margin-bottom: 20px;
            box-shadow: 0 3px 10px #e0eaf2;
            background: #fff;
          "
        >
          <Header></Header>
        </el-header>
        <el-container class="inner-container">
          <el-aside
            :width="isCollapse ? '64px' : '200px'"
            style="
              margin-top: 20px;
              margin-right: 50px;
              box-shadow: 0 2px 12px 0 #e0eaf2;
              height: max-content;
            "
          >
            <Aside></Aside>
          </el-aside>
          <el-main
            style="
              margin-top: 20px;
              background-color: #fff;
              box-shadow: 0 2px 12px 0 #e0eaf2;
              height: max-content;
            "
          >
            <transition name="router-transition" mode="out-in">
              <router-view class="view" />
            </transition>
          </el-main>
        </el-container>
      </el-container>
    </template>
  </div>
</template>

<script>
import Aside from "@/components/Aside.vue";
import Header from "@/components/Header.vue";
import AsideManageSystem from "@/components/AsideManageSystem.vue";
import HeaderManageSystem from "@/components/HeaderManageSystem.vue";
import { mapState, mapMutations } from "vuex";

export default {
  components: {
    Header,
    Aside,
    AsideManageSystem,
    HeaderManageSystem,
  },
  computed: {
    ...mapState(["isCollapse", "isManageSystem"]),
  },
  data() {
    return {};
  },
  mounted() {
    if (window.sessionStorage.getItem("manageSystemUsername")) {
      this.changeManageSystem(true);
    } else {
      this.changeManageSystem(false);
    }
  },
  methods: {
    ...mapMutations(["changeManageSystem"]),
  },
};
</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
}

html,
body,
#app {
  height: 100%;
}

.el-header {
  background-color: #fff;
}

.inner-container {
  // padding: 0 150px 50px;
  width: 1600px;
  margin: auto;
  padding-bottom: 50px;
}

.router-transition-enter-active {
  transition: all 0.5s ease;
}

.router-transition-leave-active {
  transition: all 0.6s ease;
}

.router-transition-enter {
  transform: translateX(-45px);
  opacity: 0;
}

.router-transition-leave-active {
  transform: translateX(20px);
  opacity: 0;
}
</style>
